<template>
    <view>
        <!-- #ifdef MP-WEIXIN -->
         <top-nav :inner-title="title" is-show-back="true" is-fixed="false" :navH="navH" :n="n" is-white="bg-white" opacity="1"></top-nav>
        <!-- #endif -->
        <view class='content'>
            <view class='edit'>
                <view class="bg">
                    <textarea maxlength="50" :value="value" @input="inputEvent" placeholder-style="font-size: 30rpx;margin:30rpx 0 0 20rpx;" placeholder="请输入备注，最多50个字哦"></textarea>
                    <!-- #ifdef MP-WEIXIN -->
                    <view class="count">{{cursor}}/50</view>
                    <!-- #endif -->
                    
                </view>
            </view>
            <view class="btn">
                <text @click="inputTags('不吃辣')">不吃辣</text>
                <text @click="inputTags('少放辣')">少放辣</text>
                <text @click="inputTags('多放辣')">多放辣</text>
                <text @click="inputTags('不吃蒜')">不吃蒜</text>
                <text @click="inputTags('不吃香菜')">不吃香菜</text>
                <text @click="inputTags('不吃葱')">不吃葱</text>
                <text @click="inputTags('不用打包')">不用打包</text>
                <text @click="inputTags('菜饭分开')">菜饭分开</text>
            </view>
            <view class='footer'>
                <button @click="enterEvent()">提交</button>
            </view>
        </view> 
    </view>
</template>

<script>
    import uniFly  from 'unifly';
	import request from '../../../common/request.js';
	import $api_base    from '../../../api/api_base.js';
    import event   from '../../../common/event.js';
	import topNav  from '@/template/topnav/index.vue';
	export default {
		components: { topNav },
		data() {
			return {
				navH: 0,
				n: 0,
                cursor: 0,
                title:'订单备注',
                value:''
			}
		},
		onLoad: function (option) {
            var text = option.remark || '';
            this.value  = text; 
            this.cursor = text.length,
            this.navH   = getApp().globalData.navHeight;
            this.n      = getApp().globalData.n;
            let pages     = getCurrentPages();
            let prevPage  = pages[pages.length - 2];
            prevPage.$vm.fromPage = 'packet';
		},
		methods:{
            inputEvent: function (e) {
                this.value = e.detail.value;
                this.cursor = e.detail.cursor;
                var text = this.value;
                if(text.length > 50) return false;
                this.value = text; 
                this.cursor= text.length;
            },
            inputTags:function (e){
                var value = e;
                var text = this.value + ' ' + value;
                if(text.length > 50) return false;
                this.value = text; 
                this.cursor= text.length;
            },
            enterEvent: function () {
                var self = this;
                event.emit('InputRemark', {area: self.value});
                uni.navigateBack();
            },
        }
    }
</script>
<style>
    page{
        background-color: #fff;
    }
</style>
<style lang="scss" scoped>
	@import 'index.scss';
</style>
